<template>
    <div>
        <div :class="['lyric-main',curpage]">
            <div class="lyric" :style="transForm">
                <p :class="curIndex===index+1?'cred':''" v-for="(item,index) in lyricList" :key="item.t+''+index">{{item.text}}</p>
            </div>
        </div>
        <div class="full" v-if="currentPage==='songPage'">
            <p v-show="!isfull">...</p>
            <span @click="isfull=!isfull" style="color:#ff641e">{{isfull?'收起':'展开'}}</span>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        songId:{
            type:[String,Number],
            required:true
        },
        currentPage:{
            type:String,
            default:''
        },
        currentTime:{
            type:[String,Number],
            default:0
        }
    },
   data() {
      return {
            lyricList:[],//两个参数一个为时间，一个为歌词
            isfull:false,//是否展开,
            curIndex:0//当前索引
      }
   },
   created(){
       this.getLyric(this.songId);
   },
   computed:{
       curpage(){ //控制显示歌单详情页样式还是playbar，以及是否展开
           return [this.currentPage==='songPage'?'lyric-page':'',this.isfull?'fulllyric':''] 
       },
       transForm(){ //为何不用监听器,时间是一直在变化的,但是歌词列表的时间是固定的，如果改成监听为触发很多一样没必要的事件
           if(this.curIndex>6){
               return `transform: translateY(${-30*(this.curIndex-6)}px)` //p标签高度为30px,curIndex为7时处于中间,所以需要设置大于6
           }
           return 'transform: translateY(0)'
       }
   },
   watch:{
       songId(newId){  //监听当歌曲变化时重新获取歌词
           this.lyricList=[];
           this.isfull=false;
           this.getLyric(newId)
       },
       currentTime(newTime){//实时监听时间变化
                if(this.lyricList.length===0){ //若当前歌曲没有歌词如纯音乐时则不滚动
                    return
                }
            this.curIndex=this.dealLyricIndex(newTime)
       }
   },
   methods:{
       async getLyric(id){ //获取歌词
           const res = await this.$api.getLyric(id);
        //    console.log(res)
           const lyricL=res.lrc.lyric.split('\n');
           const lycReg=/^\[(\d{2}):(\d{2}.\d{2,})\]\s*(.+)$/
        //    console.log(lyricL)
        console.log('歌词')
           lyricL.forEach((item)=>{
                const ly=lycReg.exec(item);
                if (!ly) { //有可能item里面为空
                    return  //return 在forEach里相当于continue
                }
                // console.log(ly[0])
                this.lyricList.push({t:ly[1]*60+ly[2]*1,text:ly[3]});
           })
        //    console.log(this.lyricList)
       },
       dealLyricIndex(curtime){
           for(let i=0;i<this.lyricList.length;i++){
               if(curtime<=this.lyricList[i].t){  //因为播放歌曲是递增的所以循环比较时可以得到想要的索引
                   return i
               }
           }
           return this.lyricList.length-1 //当音乐时间大于歌词列表里的最大时间时说明没有歌词了此时就返回数组的长度-1为索引
       }
   },
}
</script>
<style lang="less" scoped>
.cred{
    color: #ff641e !important;
}
.lyric-main{
    width: 400px;
    height: 100%;
    max-height: 390px;
    overflow-y: auto;
    margin-top: 20px;
    font-size: 14px;
}
.lyric{
    transition: all 1.5s;
   p{
       height: 30px;
       color: #666;
       padding-top: 5px;
        // width: 270px;
   }
   .active{
       background-color: #ff641e;
   }
}
.full{
       span{
           color: #333;
           cursor: pointer;
       }
   }
.fulllyric{
    max-height: none;
}
.lyric-page{
    overflow: hidden;
}
</style>
